<script setup>
import CitySearch from "../components/CitySearch.vue";
import NowWeather from "../components/NowWeather.vue";
import Future24HWeather from "../components/Future24HWeather.vue";
import Future7DWeather from "../components/Future7DWeather.vue";
import LivingIndex from "../components/LivingIndex.vue";
</script>

<template>
  <div>
    <CitySearch/>
    <NowWeather/>
    <div class="future">
      <Future24HWeather/>
      <Future7DWeather/>
    </div>
    <div>
      <LivingIndex/>
    </div>
  </div>
  
</template>

<style scoped>
.future{
  display: flex;
}
.future div{
  flex: 1;
}
#main{
  width: 100%;
  height: 400px;
}
.h3{
  text-align: center;
}
</style>
